<template>
	<view class="content">
		<!-- <button class="bottom" open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">获取用户信息</button> -->
		<view class="logoBox">
			<image class="logo" src="/static/index/login/login.png" mode=""></image>
		</view>
		<button class="btn color_green" open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">登录</button>
		<!-- <view class="btn color_black" @tap="goIndex">随便逛逛</view> -->
		
		<view class="shadowLogin" v-if="btnLogin">
			<view class="shadow_grey_logon" @tap="btnLogin = false"></view>
			<view class="shadow_white_logon">
				<image class="littleLogo" src="/static/index/logo.png" mode=""></image>
				<view class="littleName">单领优品小程序 申请</view>
				<view class="clearBoth"></view>
				<view class="littleNames">获取你的昵称、头像、地区及性别</view>
				<view class="infoBox">
					<image class="headImage" :src="avatarUrl" mode=""></image>
					<view class="rights">
						<view class="userName overflow_one">{{nickName}}</view>
						<view class="userNames overflow_one">微信个人信息</view>
					</view>
					<!-- <image class="icon" src="../../static/image/login/icon_1.png" mode=""></image> -->
					<view class="clearBoth"></view>
				</view>
				<view class="clearBoth"></view>
				<!-- <view class="otherName" @tap="btnUserOther">使用其他头像和昵称</view> -->
				<view class="btnBox">
					<view class="otherBtn color_grey"	@tap="btnFalse">取消</view>
					<view class="otherBtn color_green"	@tap="btnTrue">允许</view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<style>
	.content{}
	.content .title{font-weight: bold;width:90%;margin-left: 5%;color:#333333;font-size: 48upx;margin-top: 80upx;}
	.content .logoBox{width:100%;display: flex;justify-content: center;margin:100upx 0;margin-bottom: 300upx;}
	.content .logo{width:335upx;height:300upx;}
	.content .btn{width:90%;height:90upx;line-height: 90upx;margin-left: 5%;font-size: 16px;border-radius: 10upx;text-align: center;font-size:36upx;}
	.content .color_green{color:white;background: rgb(87,191,106);border:2upx solid rgb(87,191,106);margin:40upx 0;margin-left: 5%;}
	.content .color_black{color:#333333;background: white;border:2upx solid #ccc}
	.content .shadowLogin{width:100%;height:100%;position: fixed;top:0;left:0;z-index: 2;}
	.content .shadow_grey_logon{width:100%;height:100%;position: fixed;top:0;left:0;z-index: 3;background: rgba(0,0,0,0.4);}
	.content .shadow_white_logon{width:100%;padding:5%;height:40%;position: fixed;bottom:0;left:0;z-index: 4;background: white;border-top-left-radius: 30upx;border-top-right-radius:30upx;}
	.content .shadow_white_logon .littleLogo{width:44upx;height:44upx;float: left;margin-right: 20upx;}
	.content .shadow_white_logon .littleName{font-size: 26upx;height:44upx;line-height: 44upx;float: left;}
	.content .shadow_white_logon .littleNames{padding-bottom: 20upx;border-bottom: 2upx solid #ccc;font-size: 30upx;height:44upx;line-height: 44upx;margin:30upx 0 50upx 0;}
	.content .shadow_white_logon .infoBox{width:100%;}
	.content .shadow_white_logon .infoBox .headImage{width:72upx;height:72upx;float: left;margin-right:20upx;}
	.content .shadow_white_logon .infoBox .icon{float: right;width:26upx;height:18upx;position: relative;top:27upx}
	.content .shadow_white_logon .infoBox .rights{width:70%;float:left}
	.content .shadow_white_logon .infoBox .rights .userName{width:100%;font-size: 28upx;}
	.content .shadow_white_logon .infoBox .rights .userNames{width:100%;font-size: 28upx;color:#666666;}
	.content .shadow_white_logon .otherName{color:#616684;font-size: 26upx;margin:40upx 0 60upx 0;}
	.content .shadow_white_logon .btnBox{width:70%;margin-left: 15%;display: flex;justify-content: center;margin-top: 120upx;}
	.content .shadow_white_logon .btnBox .otherBtn{width:45%;margin:0 2.5%;float: left;text-align: center;padding:10upx 0;border-radius: 10upx;}
	.content .shadow_white_logon .btnBox .color_grey{background-color: rgb(237,237,237);color:rgb(87,191,106);}
</style>
<script>
	var rawData, _that;
	import Share from '@/common/wx_share.js'
	export default {
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				nickName: '',
				avatarUrl: '',
				SessionKey: '',
				code:"",
				userInfo:[],
				btnLogin:false,
				
			}
		},
		onLoad(e){
			this.share.path = this.share.path + "?userId=" + this._$userToken("userInfo").id
			
			// try {
			//     uni.setStorageSync('NewUserId', e.userId);
			// }catch(e){}
			// var _that = this;
			// var aa = {
			// 	token:"8b577a3da6afbd89323c9594538a3906fb5e39ea",
			// 	id:35,
			// }
			// try {
			//     uni.setStorageSync('userInfo', aa);
			// }catch(e){}
		},
		methods: {
			goIndex(){
				// uni.switchTab({url:"../index/index"})
				uni.navigateTo({
					url:"../index/index"
				})
			},
			AjaxLoad:function(e){
				var that = this;
				rawData = e.detail.rawData;
				if (e.detail.iv) {
					_that.userInfo = e.detail.userInfo;
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							let code = loginRes.code;
							let nickName = '';
							let avatarUrl = '';
							console.log(code);
							uni.getUserInfo({
								provider: 'weixin',
								success: function(info) {
									nickName = info.userInfo.nickName;
									avatarUrl = info.userInfo.avatarUrl
									_that.nickName = nickName;
									_that.avatarUrl = avatarUrl
									console.log(nickName)
									console.log(avatarUrl)
								}
							})
							console.log('code:' + code);
							console.log('nickName' + _that.nickName)
						}
					});
				} else {
					uni.showToast({
						title: '用户拒绝授权',
						icon: 'none'
					});
				}
			},
			btnFalse(){
				uni.showToast({icon:"none",title:"已取消登录"})
				setTimeout(function(){
					// uni.switchTab({url:"../index/index"})
					uni.navigateTo({
						url:"../index/index"
					})
				},1500)
			},
			btnTrue(){
				uni.navigateTo({
					url:"./loginTel/loginTel"
				})
			},
			onGotUserInfo: function(e) {
				uni.showLoading({title: '加载中',mask:true});
				var _that = this;
				var that = this;
				var session_keyData = ""
				rawData = e.detail.rawData;
				if (e.detail.iv) {
					_that.userInfo = e.detail.userInfo;
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							let code = loginRes.code;
							that.code = loginRes.code;
							let nickName = '';
							let avatarUrl = '';
							uni.getUserInfo({
								provider: 'weixin',
								success: function(info) {
									uni.hideLoading()
									nickName = info.userInfo.nickName;
									avatarUrl = info.userInfo.avatarUrl
									_that.nickName = nickName;
									_that.avatarUrl = avatarUrl
									that.btnLogin = true
									uni.setStorage({
										key:'encrypteData',
										data:info.encryptedData,
										success:function(){}
									})
									uni.setStorage({
										key:'iv',
										data:info.iv,
										success:function(){}
									})
									let param={
										code:that.code
									};
									_that._$InitRequest.request('login/getcode', param).then(res => {
										session_keyData = res.data.session_key.session_key
										console.log(session_keyData,1111111);
										console.log(info,22222222222222);
										let param={
											session_key:session_keyData,
											encrypteData:info.encryptedData,
											iv:info.iv,
										};
										_that._$InitRequest.request('Login/get_userInfo', param).then(res => {
											uni.setStorage({
												key:'userInfo',
												data:res.data,
												success:function(){}
											})
										},error=>{})
										uni.setStorage({
											key:'session_keyData',
											data:session_keyData,
											success:function(){}
										})
									},error=>{})
								}
							})
						}
					});
				} else {
					uni.showToast({
						title: '用户拒绝授权',
						icon: 'none'
					});
				}
			},
			
			
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>